<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue组件化思想</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="box">
        <myname></myname>
        
        <!-- 注意: html会自动将所有标签都转为小写,如果组件名是驼峰是命名,如mynameNav ,需转为myname-nav  -->
    </div>
</body>
<script>
    // 组件化思想:  扩展html元素,封装可重用的代码
    let obj = {
        data() {
            return {

            }
        },
    }
    let app = Vue.createApp(obj)
    app.component('myname', {   //全局组件定义
        // 模版格式 
        template: `
            <nav style='background:yellow'>  
                <ul>
                    <li>首页</li>
                    <li>新闻中心</li>
                    <li>{{aaa}}</li>  
                   <myname-button></myname-button>   
                </ul>    
            </nav>
        `,
        data(){   //在组件中也可以使用文本插值data()、计算属性computed、方法methods、watch等语法,css样式只能使用行内样式
            return {
                'aaa':'zhangs',
            }
        },
        //局部组件定义  局部组件定义只能在当前组件模版内使用
        components:{
            'myname-button':{
                template:`
                    <button @click="handleClick">点击我</button>
                `,
                methods:{
                    handleClick(){
                        console.log(111)
                    }
                }
            }
        }
    })
    //在app挂载之前定义组件
    app.mount('#box')
</script>

</html>